<template>
  <div>
    <el-container>
      <el-header>
        <div class="w-input">
          <el-input placeholder="请输入内容" v-model="searchName" clearable>
          </el-input>
          <el-button type="primary" @click="handleAddUser">添加用户</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table
          v-loading="isLoading"
          :data="showTableData"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号  "> </el-table-column>
          <el-table-column prop="data" label="活动日期 "> </el-table-column>
          <el-table-column prop="name" label="活动名称"> </el-table-column>
          <el-table-column prop="region" label="活动区域"> </el-table-column>
          <el-table-column prop="rule" label="负责人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                :loading="scope.row.id === deletedRow.id"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
    <!-- 编辑用户 -->
    <DialogUser
      @closeDialog="handleCloseDialog"
      :toggle="userDialogVisible"
      @updateTable="handleUpdateTable"
      :editUser="editedUser"
    />
  </div>
</template>

<script>
import { apimockactivitys } from "@/api/mockActivityregister";
import DialogUser from "./DialogUser.vue";
export default {
  name: "ActivityRegistercomponent",
  components: { DialogUser },
  computed: {
    showTableData() {
      return this.tableData.filter((row) => row.name.includes(this.searchName));
    },
  },
  data() {
    return {
      tableData: [],
      isLoading: false,
      deletedRow: {}, //表示被删除的行
      searchName: "",
      userDialogVisible: false, //为true， 即 UserDialog 显示
      editedUser: {}, // 点击哪行的 「edit」 按钮，则 本变量，为 该行的 数据
    };
  },
  methods: {
    //点击编辑按钮 触发本回调函数
    handleEdit(index, row) {
      // console.log(index, row);
      // console.log("row.id", row.id);
      this.userDialogVisible = true;
      this.editedUser = row; // 点击哪行的 「edit」 按钮，则 editedUser，为 该行的 数据

      //即获得删除行的数据
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.deletedRow = row;
      apimockactivitys
        .delete(row.id)
        .then((res) => {
          if (res.status === "success") {
            this.$message.success(`删除- ${row.name} 本行成功`);
            setTimeout(this.refreshTable, 1000);
          }
        })
        .finally(() => {
          this.deletedRow = {};
        });
    },
    //执行本函数，及拉取最新的table数据，后更新table
    refreshTable() {
      this.isLoading = true;
      apimockactivitys
        .getAll()
        .then((res) => {
          this.tableData = res;
        })
        // 监视报错 出现问题
        // .catch((err) => {
        //   this.$message.error("拉去table接口报错");
        // })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleAddUser() {
      //点击 [添加用户按钮]， Dialog 弹出
      this.userDialogVisible = true;
    },
    //当adduser 提交数据成功 ， 则adduser通过事件 type -> 'updateTable' 触发本函数，以更新table
    handleUpdateTable() {
      this.refreshTable();
    },

    //只要dialoguser 被关闭，则触发本回调函数
    handleCloseDialog() {
      // 设为FALSE的目的，是为了第>=2次，还能打开dialog
      this.userDialogVisible = false;

      // 只要是 DialogUser 被关闭，则要 清空 editedUser 的数据
      this.editedUser = {};
    },
  },
  mounted() {
    this.refreshTable();
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.w-input {
  width: 700 px;
  display: flex;
}

/* .el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
} */

body > .el-container {
  margin-bottom: 40px;
}
</style>
